<template>

	<el-row>
		<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
		    <el-card :body-style="{ padding: '0px' }">
<!--		      <img src="../../../assets/003.png" class="image">-->
          <img src="../../assets/images/003.png" class="image">
			  <div style="padding: 12px;">
		        <span>低浓度啤酒</span>
		        <div class="bottom clearfix">
		          <h5>商品的价格：15￥</h5>
              <el-button type="text" @click="innerVisible12 = true">立即购买</el-button>
                <el-dialog title="购买页面" :visible.sync="innerVisible12" :before-close = "handleClose_12">
                  <span>
<!--                    <img src="../../../assets/003.png" class="image">-->
                      <img src="../../assets/images/003.png" class="image">
                    <h2>数量：</h2>
                    <el-input-number v-model="product.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                    <h2>总价格:
                    </h2>
                   <el-input-number :value="product.quantity*product.price" :step="15"></el-input-number>
                  </span>
<!--                  <el-dialog-->
<!--                    width="30%"-->
<!--                    title="结算页面"-->
<!--                    :visible.sync="innerVisible"-->
<!--                    append-to-body>-->
<!--                    <span>-->
<!--                      <el-button type="success" plain>支付宝</el-button>-->
<!--                      <el-button type="success" plain>微信</el-button>-->
<!--                      <el-button type="success" plain>其他方式</el-button>-->
<!--                    </span>-->
<!--                  </el-dialog>-->
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible12 = false">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">立即结算</el-button>
                  </div>
                </el-dialog>
		        </div>
		      </div>
		    </el-card>
		  </el-col>

      <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
<!--            <img src="../../../assets/007.png" class="image">-->
            <img src="../../assets/images/007.png" class="image">
      	  <div style="padding: 12px;">
              <span>中浓度啤酒</span>
              <div class="bottom clearfix">
                <h5>商品的价格：20￥</h5>
                <el-button type="text" @click="innerVisible13 = true">立即购买</el-button>
                                <el-dialog title="购买页面" :visible.sync="innerVisible13">
                                  <span>
<!--                                    <img src="../../../assets/007.png" class="image">-->
                                      <img src="../../assets/images/007.png" class="image">
                                    <h2>数量：</h2>
                                    <el-input-number v-model="product1.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                                    <h2>总价格:
                                    </h2>
                                   <el-input-number :value="product1.quantity*product1.price" :step="20"></el-input-number>
                                  </span>
                                  <el-dialog
                                    width="30%"
                                    title="结算页面"
                                    :visible.sync="innerVisible"
                                    append-to-body>
                                    <span>
                                      <el-button type="success" plain>支付宝</el-button>
                                      <el-button type="success" plain>微信</el-button>
                                      <el-button type="success" plain>其他方式</el-button>
                                    </span>
                                  </el-dialog>
                                  <div slot="footer" class="dialog-footer">
                                    <el-button @click="innerVisible13 = false">取 消</el-button>
                                    <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
                                  </div>
                                </el-dialog>
                		        </div>
                		      </div>
                		    </el-card>
                		  </el-col>

                      <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
                          <el-card :body-style="{ padding: '0px' }">
<!--                            <img src="../../../assets/006.png" class="image">-->
                            <img src="../../assets/images/006.png" class="image">
                      	  <div style="padding: 12px;">
                              <span>高浓度啤酒</span>
                              <div class="bottom clearfix">
                                <h5>商品的价格：25￥</h5>
                                <el-button type="text" @click="innerVisible14 = true">立即购买</el-button>
                                                <el-dialog title="购买页面" :visible.sync="innerVisible14">
                                                  <span>
<!--                                                    <img src="../../../assets/006.png" class="image">-->
                                                      <img src="../../assets/images/006.png" class="image">
                                                    <h2>数量：</h2>
                                                    <el-input-number v-model="product2.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                                                    <h2>总价格:
                                                    </h2>
                                                   <el-input-number :value="product2.quantity*product2.price" :step="20"></el-input-number>
                                                  </span>
                                                  <el-dialog
                                                    width="30%"
                                                    title="结算页面"
                                                    :visible.sync="innerVisible"
                                                    append-to-body>
                                                    <span>
                                                      <el-button type="success" plain>支付宝</el-button>
                                                      <el-button type="success" plain>微信</el-button>
                                                      <el-button type="success" plain>其他方式</el-button>
                                                    </span>
                                                  </el-dialog>
                                                  <div slot="footer" class="dialog-footer">
                                                    <el-button @click="innerVisible14 = false">取 消</el-button>
                                                    <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
                                                  </div>
                                                </el-dialog>
                                		        </div>
                                		      </div>
                                		    </el-card>
                                		  </el-col>
	</el-row>

</template>

<script>
	export default {
	  data() {
	    return {
	      tabledata:[] ,
        goods:{
	        name:'' ,
          num:''
        } ,

         outerVisible: false,
         innerVisible: false,
                innerVisible12: false,
                innerVisible13: false,
                innerVisible14: false,
                product:{
                    price:15,
                    quantity:1
                },
               product1: {
                  price:20,
                  quantity:1
                },
                product2: {
                   price:25,
                   quantity:1
                 },
                  //num2:num1*15,
              };
            },
            methods: {
                  handleChange(value) {
                   // console.log(value);
                  },
              handleClose_12(){
                    this.innerVisible12 = false ;
              } ,
              submitHandle(){
                    var that = this ;
                    this.axios({
                      url:'http://127.0.0.1:3000/goods/add' ,
                      methods: 'get' ,
                      params:{
                        name : this.goods.name ,
                        num: this.quantity
                      }
                    }).then(function (res) {
                      if (res.data.flag){
                        that.$message('购买成功 ^^')
                        that.handleClose_12() ;
                      } else {
                        alert('购买失败 QAQ')
                      }
                    })
              } ,






                }

	}

</script>


<style>
	.time {
	    font-size: 13px;
	    color: #ffaaff;
	  }

	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }

	  .button {
	    padding: 0;
	    float: right;
	  }

	  .image {
	    width: 100%;
	    display: block;
	  }

	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }

	  .clearfix:after {
	      clear: both
	  }
</style>
